<template>
  <div class="my-tooltip" v-show="showTooltip">{{ tipContent }}</div>
</template>

<script>
export default {
  data() {
    return {
      tipContent: ""
    };
  },
  props: {
    showTooltip: Boolean
  },
  methods: {
    show(tipContent) {
      this.tipContent = tipContent;
      this.$emit("update:showTooltip", true);
      setTimeout(() => {
        this.hide();
      }, 1000);
    },
    hide() {
      this.$emit("update:showTooltip", false);
    }
  }
};
</script>

<style scoped>
.my-tooltip {
  display: inline-block;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>